{% import "Functions.twig" as functions %}

<span class="graded-component-data"
      data-total_score="{{ graded_component.total_score }}"
      data-graded_version="{{ graded_component.graded_version }}"
      data-grade_time="{{ graded_component.grade_time }}"
      data-grader_id="{{ graded_component.grader_id }}"
      data-verifier_id="{{ graded_component.verifier_id }}" hidden></span>

{# Note: the ternery operator cannot consistently be used to insert the result of a macro into the output,
    so we need to use the long-form {% if <condition> %}{{ call_macro() }}{% endif %} #}
<span class="col-no-gutters badge-container">
    <strong id="grading_total"
            class="badge {% if graded_component is defined %} {{ functions.getBadgeStyle(graded_component.total_score, component.max_value) }} {% endif %}">
        {{ graded_component.total_score is defined ? graded_component.total_score|round(decimal_precision) : '&minus;' }} / {{ component.max_value|round(decimal_precision) }}
    </strong>
</span>

<span class="component-title col-no-gutters">
    <b>{{ component.title|escape }}</b>
</span>

{% if component.page > 0 %}
    <span class="page-number-view col-no-gutters">
        <i>(Page # {{ component.page }})</i>
    </span>
{% endif %}

<span class="divider col"> </span>

<span class="col-no-gutters">
    {# Saving status #}
    {% include "SavingTools.twig" with {
        'show_save_tools': show_mark_list,
        'cancel_on_click': 'onCancelComponent(this)'
    } only %}
</span>

{% if component_version_conflict and not grading_disabled %}
    <span class="version-warning col-5">
        Please edit or ensure that comments from version {{ graded_component.graded_version }} still apply.
    </span>
{% else %}
    {% if show_verify_grader %}
        <span class="verify-container col-no-gutters">
            <input type="button" class="btn btn-default" onclick="onVerifyComponent(this); event.stopPropagation()" value="Verify Grader"/>
        </span>
    {% endif %}
{% endif %}

<span class="graded-by col-no-gutters">
    {% if graded_component.grader_id is defined %}
        Graded by {{ graded_component.grader_id }}
        {% if graded_component.verifier_id is defined %}
           <br> Verified by {{ graded_component.verifier_id }}
        {% endif %}
    {% else %}
        Ungraded!
    {% endif %}
</span>
